<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <img class="logo" src="@/assets/logo.png" alt="" />
      </template>
      <template #right>
        <van-button class="nav-btn" round icon="search" type="primary"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <div class="tab-box">
      <!-- tab栏 -->
      <van-tabs v-model="active">
        <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
          <!-- 新闻列表大盒子 -->
          <article-list :channel_id="item.id"></article-list>
        </van-tab>
      </van-tabs>
      <!-- 图标 -->
      <van-icon
        class="open-icon"
        name="wap-nav"
        @click="$refs.channelEdit.show = true"
      />
    </div>

    <!-- 频道管理 -->
    <!-- $event用在组件就是子传递过来的数据 -->
    <!-- <channel-edit
      ref="channelEdit"
      :own-list="ownList"
      :all-list="allList"
      :value="active"
      @input="active = $event"
    ></channel-edit> -->

    <!--
      v-model是一个语法糖
      什么是语法糖？
        就是少量代码生成多句代码，有点类似于vscode的代码段

      v-model="数据"
      它会帮你生成
        :value="数据" 以及 @input="数据 = $event"
      所以，如果你写的是 v-model="active"
      它会帮你生成
        :value="active"    @input="active = $event"
      就意味着，父传子时，子里的prop一定要叫value以及子父传时，$emit事件必须叫input
    -->
    <channel-edit
      ref="channelEdit"
      :own-list="ownList"
      :all-list="allList"
      v-model="active"
      @add="ownList.push($event)"
      @del="del"
    ></channel-edit>
  </div>
</template>

<script>
import { ownChannelAPI, allChannelAPI, saveChannels } from '@/api/channel'
import ArticleList from './components/ArticleList'
import ChannelEdit from './components/ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      ownList: [],
      allList: [],
      isFirst: true
    }
  },
  async created () {
    /*
    if (this.$store.state.user.tokenObj.token) {
      // 获取我的频道
      const res1 = await ownChannelAPI()
      this.ownList = res1.data.channels
    } else {
      // 没登录 - 获取本地存储
      const list = JSON.parse(localStorage.getItem('channel99'))
      if (list) {
        this.ownList = list
      } else {
        // 获取我的频道
        const res1 = await ownChannelAPI()
        this.ownList = res1.data.channels
      }
    }
    */

    // 要么有token，要么本地存储没数据
    const list = JSON.parse(localStorage.getItem('channel99'))
    if (this.$store.state.user.tokenObj.token || !list) {
      // 获取我的频道
      const res1 = await ownChannelAPI()
      this.ownList = res1.data.channels
    } else {
      this.ownList = list
    }

    // 获取所有的频道
    const res2 = await allChannelAPI()
    this.allList = res2.data.channels
  },
  methods: {
    del (obj) {
      this.ownList = this.ownList.filter(v => v.id !== obj.id)
      // 判断要删除的下标是否在当前选中的前面
      if (obj.index < this.active) {
        this.active--
      }
    }
  },
  watch: {
    async ownList () {
      // 注意：页面一打开也会调用一次
      // 而页面一打开调用这里没意义，因为都还没得及操作你就发一次请求或者存到本地浪费性能
      // 希望：第一次来不要往下执行，后面都能放下执行
      if (this.isFirst) {
        this.isFirst = false
        return
      }

      // 判断是否登录
      if (this.$store.state.user.tokenObj.token) {
        // 登录了 -- 发请求 存我的频道
        // 不能直接把ownList作为参数，因为接口要的是id和seq，而ownList只有id和name
        const channels = this.ownList.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        await saveChannels({
          channels
        })
      } else {
        // 没登录 -- 存到本地
        localStorage.setItem('channel99', JSON.stringify(this.ownList))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 120px;
  height: 100%;
  object-fit: contain;
}

.nav-btn {
  width: 100px;
  height: 30px;
  background-color: #5aabfb;
  border: none;
  .van-button__icon {
    color: #fff;
  }
}

.tab-box {
  position: relative;

  ::v-deep .van-tabs__wrap {
    width: 345px;
  }

  .open-icon {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 30px;
    height: 44px;
    line-height: 44px;
  }
}
</style>
